<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <!-- 渲染数据 -->
    <!-- 添加类名 选中的话是才有这个样式 为true 用动态样式对象的样式 样式：布尔值 -->
    <li :class="{completed: item.isDone}"  v-for="item in list" :key="item.id" >
      <div class="view">        
        <!-- 不能直接绑定v-model item.isDone 他是父亲的  拆分成：checked 和change函数  checked实现数据影响界面，没有实现界面影响数据，因为父亲才会权利 所有有一个change事件= -->
        <input class="toggle" type="checkbox" :checked="item.isDone"  @change="changeFn(item.id) "/> 
        <!-- 实现双向帮绑定 子传父 -->
        <label>{{item.name}}</label>
        <!-- 删除  子传父  -->
        <button class="destroy" @click="delFn(item.id)"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
  //接受父传过来的数据
  props:{
    list:{
      type:Array,
      required:true
    }
  },
  methods:{
    //根据id删除，函数 传过来每一个id，形参接受
    delFn(id){
      //触发父里面的delFn 把id传给父
      this.$emit('del',id)
    },
    //！！！改变状态要告知父亲
    changeFn (id){
      this.$emit('changeFn',id)
    }
  }
}
</script>